<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-button type="primary" @click="handleAdd" size="medium" style="margin-bottom: 10px">添加</el-button>
      <el-input
        placeholder="请输入姓名"
        v-model="name"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getAdminList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
      <el-table
        :data="page.records"
        border
        highlight-current-row
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id">
        </el-table-column>
        <el-table-column
          label="用户名"
          prop="userName">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name">
        </el-table-column>
<!--        <el-table-column-->
<!--          label="级别"-->
<!--          prop="power">-->
<!--        </el-table-column>-->
        <el-table-column
          label="电话"
          prop="phone">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="phone">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ getDateTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="所属组织"
          prop="association">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changeAdminList"
        :page-count="page.pages"
      >
      </el-pagination>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData" :rules="rules" ref="formData" class="demo-formData">
        <el-form-item label="ID" :label-width="formLabelWidth" prop="id">
          <el-input v-model.number="formData.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="formData.userName" autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">-->
        <!--          <el-input v-model="formData.password" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="formData.phone" autocomplete="off" maxLength="11"></el-input>
        </el-form-item>
        <el-form-item label="所属组织" :label-width="formLabelWidth" >

          <el-select v-model="formData.association" placeholder="请选择所属组织">
            <el-option
              v-for="item in optionsSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
                <el-form-item v-if="this.condition=='add'" label="密码" :label-width="formLabelWidth" prop="password">
                  <el-input v-model="formData.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-if="this.condition=='add'" label="确认密码" :label-width="formLabelWidth" prop="password">
                  <el-input v-model="formData.passwordTwo" autocomplete="off"></el-input>
                </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getAdminPageList, getAdminList, updateAdmin, getAdmin, addAdmin, deleteAdmin} from "@/api/admin";
import {getDateTime1} from "../../../utils/dateTimeUtil";

export default {
  data() {
    return {
      name: "",
      page: {
        total: 100,
        current: 1,
        records: [],
        pages: 10,
      },
      AdminList: [],

      optionsSelect: [{
        value: '软件工程系',
        label: '软件工程系'
      }, {
        value: '网络技术系',
        label: '网络技术系'
      }, {
        value: '电子系',
        label: '电子系'
      }, {
        value: '数码媒体系',
        label: '数码媒体系'
      }, {
        value: '计算机系',
        label: '计算机系'
      }, {
        value: '财会系',
        label: '财会系'
      }, {
        value: '游戏系',
        label: '游戏系'
      }, {
        value: '管理系',
        label: '管理系'
      }, {
        value: '外语系',
        label: '外语系'
      }, {
        value: '团委',
        label: '团委'
      }
      ],
      //添加/修改对话框
      title: '',
      dialogFormVisible: false,
      condition: '',
      // 表单参数
      formData: {},
      formLabelWidth: '120px',
      rules: {
        // id: [
        //   {required: true, message: '请输入编号', trigger: 'blur'}
        // ],
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        association: [
          {required: true, message: '请输入选择所属组织', trigger: 'blur'},
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        password: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],

      }
    }
  },
  components: {},
  created() {
    this.getAdminList();
  },
  methods: {
    changeAdminList(val) {
      console.log(val)
      this.page.current = val;
      this.getAdminList();
    },
    getAdminList() {
      getAdminPageList({
        // status: this.selectClubStatusValue,
        name: this.name,
        currentPage: this.page.current,
      }).then(res => {
        this.page = res.data;
        console.log(this.page.pages)
      })
    },

    getDateTime(val) {
      return getDateTime1(val);
    },
    // 取消按钮
    cancel() {
      this.dialogFormVisible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        name: undefined,
        username: undefined,
        power: undefined,
        phone: undefined,
        association: undefined
      }
      this.resetForm("formData");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.dialogFormVisible = true;
      this.condition = "add";
    },
    /** 修改按钮操作 */
    handleEdit(index, row) {
      this.reset();
      this.condition = "update";
      console.log("修改按钮取item id: " + row.id);
      getAdmin({
        id: row.id
      }).then(response => {
        console.log("res:" + JSON.stringify(response));
        this.formData = response.data;
        this.dialogFormVisible = true;
        this.title = "修改管理员";
      });
    },
    /** 提交按钮 */
    submitForm(formName) {
      this.formData.createTime = "";
      this.formData.updateTime = "";
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.condition === "update") {
            console.log("是否存在时间：", this.formData);
            updateAdmin(this.formData).then(response => {
              this.$message({
                type: 'success',
                message: '修改成功'
              });
              this.dialogFormVisible = false;
              this.getAdminList();
            });
          } else if (this.condition === "add") {
            if (this.formData.passwordTwo != this.formData.password) {
              this.$message({
                type: 'error',
                message: '两次新密码不一样'
              });
              return;
            }
            addAdmin(this.formData).then(response => {
              this.$message({
                type: 'success',
                message: '新增成功'
              });
              this.dialogFormVisible = false;
              this.getAdminList();
            });
          } else {
            this.$message({
              type: 'error',
              message: '操作失败'
            });
            this.dialogFormVisible = false;
            this.getAdminList();
          }
        }
      });
    },
    handleDelete(index, id) {
      console.log("要删除的管理员：", index, id);
      let temp = new Object();
      temp.id = id;
      this.$confirm('此操作将删除该' + id + '管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAdmin(
          temp
        ).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            location.reload();
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  },
}
</script>
<style>
.table_container {
  padding: 20px;
}

.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

</style>
